<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootsttrap/css/bootstrap.min.css">
    <script src="../jquery-3.6.0.js"></script>
    <style>
        .right {
            float: right;
            margin-right: 20px;
        }

        /* .list{
            display: flex;
            flex-wrap: wrap;
        } */
        .piccc {
            width: 200px;
            height: 200px;
        }

        .lists {
            height: 400px;
        }
    </style>
</head>

<body>
    <!-- 导航条 -->
    <ol class="breadcrumb">
        <li><a href="#">购物车</a></li>
        <li class="shouye"><a href="#">首页</a></li>

        <li class="right"><a href="#">个人中心</a></li>
        <!-- <li class="active right">购物车</li> -->
        <li class="active right kong">清空购物车</li>
    </ol>
    <!-- 商品列表 -->
    <div class="row list">

    </div>
    <script>
        var temp = new URLSearchParams(window.location.search)
        var id = temp.get('id')
        var token = localStorage.getItem('token')
        console.log(token);
        // console.log(id)

        $.ajax({
            type: 'get',
            url: 'https://api.it120.cc/conner/shopping-cart/info',
            data: {
                token
            }
        }).then(function dd(res) {
            console.log(res)
            
            var str = ''
            res.data.items.forEach(item => {
                str += `
                <div class="col-sm-4 col-md-3">
                   <div class="thumbnail lists">
                   <img src="${item.pic}" alt="..." class='piccc'>
                   <div class="caption">
                   <h3>${item.name}</h3>
                
                     <p><a href="#" class="btn btn-primary save" role="button">添加收藏</a> 
                   <a href="#" class="btn btn-default shop del" role="button" key='${item.key}'>删除</a>
                  </p>
                </div>
              </div>
        </div>`
            });
           document.querySelector('.list').innerHTML=str
           
        })
        $('.shouye').click(function(){
               location.href='./index.html'
           })
           //清空购物车
           $('.kong').click(function(){
               console.log(1)
               $.ajax({
                   type:'post',
                   url:'https://api.it120.cc/conner/shopping-cart/empty',
                   data:{
                    token
                   }
                   }).then(function tt(res){
                       console.log(res)
                       var str='已经清空'
                       document.querySelector('.list').innerHTML=str
               })
           })
           //删除单个购物车
           $('.list').on('click','.del',function(){
            //    console.log($(this));
               console.log($(this).attr('key'));
               $.ajax({
                   type:'post',
                   url:'https://api.it120.cc/conner/shopping-cart/remove',
                   data:{
                       key:$(this).attr('key'),
                       token
                   }
               }).then(function yy(res){
                   if(res.code==0){
                    // console.log(res)
                   alert('已经删除')
                   history.go(0)
                   }else{
                       alert('全删了，没了')
                       history.go(0)
                   }
                   

               })

           })
           //添加商品收藏功能
           $('.list').on('click','.save',function(){
               console.log(22);
               $.ajax({
                   type:'post',
                   url:'https://api.it120.cc/conner/shop/goods/fav/add',
                   data:{
                    goodsId:id,
                    type:0||1,
                    token
                   }
               }).then(res=>{
                   console.log(res)
               })
           })
    </script>

</body>

</html>